$(function () {
    // 渲染数据
    let dataArr = JSON.parse(localStorage.getItem("dataArr")) || [];
    let str = "";
    dataArr.forEach(function (v, i) {
        str += `
        <div class="cartBox">
        <div class="shop_info">
            <div class="all_check">
                <!--店铺全选-->
                <input type="checkbox" id="shop_${i}" class="shopChoice">
                <label for="shop_${i}" class="shop"></label>
            </div>
            <div class="shop_name">
                <!-- 此处追加店铺名字 -->
                <a href="javascript:void(0)" id="shopName">${v.shopname}</a>
            </div>
        </div>
        <div class="order_content">
            <ul class="order_lists">
                <li class="list_chk">
                    <input type="checkbox" id="checkbox_${i}" class="son_check">
                    <label for="checkbox_${i}"></label>
                </li>
                <li class="list_con ml-30 mr-80">
                    <div class="list_img"><a href="javascript:void(0)">
                            <!-- 此处是追加的img -->
                            <img src="${v.goodsurls.nowurl}" alt="">
                        </a>
                    </div>
                    <div class="list_text">
                        <!-- 此处追加加title -->
                        <a href="javascript:void(0)">${v.goodstitle}</a>
                    </div>
                </li>
                <li class="list_props mr-30">
                    <!-- props信息追加 -->
                    <p class="props_txt mt-20">
                    </p>
                </li>
                <li class="list_price ml-30">
                    <!-- 单价 -->
                    <p class="price">￥${v.goodszprice}</p>
                </li>
                <li class="list_amount">
                    <div class="amount_box">
                        <a href="javascript:void(0)" class="reduce reSty">-</a>
                        <input type="text" value="${localStorage.getItem(v.goodsid)}" class="sum">
                        <a href="javascript:void(0)" class="plus">+</a>
                    </div>
                </li>
                <li class="list_sum">
                    <p class="sum_price">￥${parseFloat(v.goodszprice)}</p>
                </li>
                <li class="list_op">
                    <p class="del"><a href="javascript:void(0)" data-goodsId="${v.goodsid}" class="delBtn fz14">删除</a></p>
                    <p class="store"><a href="javascript:void(0)" class="stoBtn fz14">收藏</a></p>
                </li>
            </ul>
        </div>
        </div>
                 `;
    })
    // 渲染到页面上
    // console.log(str);
    $('.cartMaxbox').html(str);

    // 猜你喜欢数据
    let xihuan = $('#xihuan');
    let str1 = "";
    console.log(data.beautyData);
    for (let i = 0; i < 6; i++) {
        str1 += `
        <li>
             <div class="p-img">
                 <a href="../html/goods.html?shopName=beautyData#${data.beautyData[i].goodsid}">
                     <img src="${data.beautyData[i].goodsurls.nowurl}" width="190" alt="">
                 </a>
             </div>
             <div class="p-price">￥${data.beautyData[i].goodsprice}</div>
             <div class="p-name">
                 <a href="">${data.beautyData[i].goodstitle}</a>
             </div>
             <div class="p-num">
                 已售<em>${data.beautyData[i].sales}</em>件
             </div>

        </li>
        `;
    }
    // console.log(str1);
    xihuan.html(str1);
    //全局的checkbox选中和未选中的样式
    var $allCheckbox = $('[type="checkbox"]'), //全局的全部checkbox
        $wholeChexbox = $('.whole_check'),
        $cartBox = $('.cartBox'), //每个商铺盒子
        $shopCheckbox = $('.shopChoice'), //每个商铺的checkbox
        $sonCheckBox = $('.son_check'); //每个商铺下的商品的checkbox

    // console.log($allCheckbox)
    $allCheckbox.on('click', function () {
        if ($(this).is(':checked')) {
            $(this).next('label').addClass('mark');
        } else {
            $(this).next('label').removeClass('mark')
        }
    });

    //===============================================全局全选与单个商品的关系================================
    $wholeChexbox.click(function () {
        var $checkboxs = $cartBox.find('input[type="checkbox"]');
        if ($(this).is(':checked')) {
            $checkboxs.prop("checked", true);
            $checkboxs.next('label').addClass('mark');
        } else {
            $checkboxs.prop("checked", false);
            $checkboxs.next('label').removeClass('mark');
        }
        totalMoney();
    });


    $sonCheckBox.each(function () {
        $(this).click(function () {
            if ($(this).is(':checked')) {
                //判断：所有单个商品是否勾选
                var len = $sonCheckBox.length;
                var num = 0;
                $sonCheckBox.each(function () {
                    if ($(this).is(':checked')) {
                        num++;
                    }
                });
                if (num == len) {
                    $wholeChexbox.prop("checked", true);
                    $wholeChexbox.next('label').addClass('mark');
                }
            } else {
                //单个商品取消勾选，全局全选取消勾选
                $wholeChexbox.prop("checked", false);
                $wholeChexbox.next('label').removeClass('mark');
            }
        })
    })

    //=======================================每个店铺checkbox与全选checkbox的关系/每个店铺与其下商品样式的变化===================================================

    //店铺有一个未选中，全局全选按钮取消对勾，若店铺全选中，则全局全选按钮打对勾。
    $shopCheckbox.each(function () {
        $(this).click(function () {
            if ($(this).is(':checked')) {
                //判断：店铺全选中，则全局全选按钮打对勾。
                var len = $shopCheckbox.length;
                var num = 0;
                $shopCheckbox.each(function () {
                    if ($(this).is(':checked')) {
                        num++;
                    }
                });
                if (num == len) {
                    $wholeChexbox.prop("checked", true);
                    $wholeChexbox.next('label').addClass('mark');
                }

                //店铺下的checkbox选中状态
                $(this).parents('.cartBox').find('.son_check').prop("checked", true);
                $(this).parents('.cartBox').find('.son_check').next('label').addClass('mark');
            } else {
                //否则，全局全选按钮取消对勾
                $wholeChexbox.prop("checked", false);
                $wholeChexbox.next('label').removeClass('mark');

                //店铺下的checkbox选中状态
                $(this).parents('.cartBox').find('.son_check').prop("checked", false);
                $(this).parents('.cartBox').find('.son_check').next('label').removeClass(
                    'mark');
            }
            totalMoney();
        });
    });


    //========================================每个店铺checkbox与其下商品的checkbox的关系======================================================

    //店铺$sonChecks有一个未选中，店铺全选按钮取消选中，若全都选中，则全选打对勾
    $cartBox.each(function () {
        var $this = $(this);
        var $sonChecks = $this.find('.son_check');
        $sonChecks.each(function () {
            $(this).click(function () {
                if ($(this).is(':checked')) {
                    //判断：如果所有的$sonChecks都选中则店铺全选打对勾！
                    var len = $sonChecks.length;
                    var num = 0;
                    $sonChecks.each(function () {
                        if ($(this).is(':checked')) {
                            num++;
                        }
                    });
                    if (num == len) {
                        $(this).parents('.cartBox').find('.shopChoice').prop("checked",
                            true);
                        $(this).parents('.cartBox').find('.shopChoice').next('label')
                            .addClass('mark');
                    }

                } else {
                    //否则，店铺全选取消
                    $(this).parents('.cartBox').find('.shopChoice').prop("checked",
                        false);
                    $(this).parents('.cartBox').find('.shopChoice').next('label')
                        .removeClass('mark');
                }
                totalMoney();
            });
        });
    });


    //=================================================商品数量==============================================
    var $plus = $('.plus'),
        $reduce = $('.reduce'),
        $all_sum = $('.sum');
    $plus.click(function () {
        var $inputVal = $(this).prev('input'),
            $count = parseFloat($inputVal.val()) + 1,
            $obj = $(this).parents('.amount_box').find('.reduce'),
            $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
            $price = $(this).parents('.order_lists').find('.price').html(), //单价
            $priceTotal = $count * parseFloat($price.substring(1));
        $inputVal.val($count);
        $priceTotalObj.html('￥' + $priceTotal);
        if ($inputVal.val() > 1 && $obj.hasClass('reSty')) {
            $obj.removeClass('reSty');
        }
        totalMoney();
    });

    $reduce.click(function () {
        var $inputVal = $(this).next('input'),
            $count = parseFloat($inputVal.val()) - 1,
            $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
            $price = $(this).parents('.order_lists').find('.price').html(), //单价
            $priceTotal = $count * parseFloat($price.substring(1));
        if ($inputVal.val() > 1) {
            $inputVal.val($count);
            $priceTotalObj.html('￥' + $priceTotal);
        }
        if ($inputVal.val() == 1 && !$(this).hasClass('reSty')) {
            $(this).addClass('reSty');
        }
        totalMoney();
    });

    $all_sum.keyup(function () {
        var $count = 0,
            $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
            $price = $(this).parents('.order_lists').find('.price').html(), //单价
            $priceTotal = 0;
        if ($(this).val() == '') {
            $(this).val('1');
        }
        $(this).val($(this).val().replace(/\D|^0/g, ''));
        $count = $(this).val();
        $priceTotal = $count * parseFloat($price.substring(1));
        $(this).attr('value', $count);
        $priceTotalObj.html('￥' + $priceTotal);
        totalMoney();
    })

    //======================================移除商品========================================

    var $order_lists = null;
    var $order_content = '';
    let removeId = 0;
    $('.delBtn').click(function () {
        removeId = $(this).parents(".cartBox").index();
        $order_lists = $(this).parents('.order_lists');
        $order_content = $order_lists.parents('.order_content');
        $('.model_bg').fadeIn(300);
        $('.my_model').fadeIn(300);
    });

    //关闭模态框
    $('.closeModel').click(function () {
        closeM();
    });
    $('.dialog-close').click(function () {
        closeM();
    });

    function closeM() {
        $('.model_bg').fadeOut(300);
        $('.my_model').fadeOut(300);
    }
    //确定按钮，移除商品
    $('.dialog-sure').click(function () {
        /*商品的id*/
        // let idS=$($('.delBtn').get(removeId)).attr("data-goodsId");
        removeLocalStorage($('.delBtn'))


        $order_lists.remove();
        if ($order_content.html().trim() == null || $order_content.html().trim().length == 0) {

            $order_content.parents('.cartBox').remove();
        }
        closeM();
        $sonCheckBox = $('.son_check');
        totalMoney();
    })

    /*删除本地数据*/
    function removeLocalStorage(del) {
        /*商品的id*/
        let idS = $(del.get(removeId)).attr("data-goodsId");
        let item = localStorage.getItem("spIdS");
        /*获取新的*/
        item = item.replaceAll("goodsId" + idS + ",", "");

        let obj = [];
        Object.keys(data).forEach(function (key) {
            /*找到符合条件的对象 并返回*/
            data[key].filter(function (v) {
                if (item != null && item.includes("goodsId" + v.goodsid + ",")) {
                    obj.push(v);
                }
            })
        });

        // let obj= data.filter(function (v,i) {
        //     /*找到符合条件的对象 并返回*/
        //     if(item!=null&&item.includes("goodsId"+v.goodsid+",")){
        //         return v;
        //     }
        // })
        /*更新数据*/
        localStorage.removeItem(idS)
        localStorage.setItem("spIdS", item);
        localStorage.setItem("dataArr", JSON.stringify(obj))
    }

    //======================================总计==========================================

    function totalMoney() {
        var total_money = 0;
        var total_count = 0;
        var calBtn = $('.calBtn a');
        $sonCheckBox.each(function () {
            if ($(this).is(':checked')) {
                var goods = parseFloat($(this).parents('.order_lists').find('.sum_price').html()
                    .substring(1));
                var num = parseFloat($(this).parents('.order_lists').find('.sum').val());
                total_money += goods;
                total_count += num;
            }
        });
        $('.total_text').html('￥' + total_money.toString().substring(0, 6));
        $('.piece_num').html(total_count);

        // console.log(total_money,total_count);

        if (total_money != 0 && total_count != 0) {
            if (!calBtn.hasClass('btn_stytotal_money')) {
                calBtn.addClass('btn_sty');
            }
        } else {
            if (calBtn.hasClass('btn_sty')) {
                calBtn.removeClass('btn_sty');
            }
        }
    }
});
